<template>
    <div>
        <div>
           <span style="font-size: 16px">测试>>员工</span>
        </div>
        <div style="width: 400px;display: flex;justify-content: space-between">
            <a-input  placeholder="员工姓名"  style="width: 150px">
            </a-input>
            <a-input  placeholder="电话号码"  style="width: 150px">
            </a-input>
            <a-button @click="onSearch" style="width:65px;background-color:dodgerblue;color: white">
                查询
            </a-button>
            <br /><br />
        </div>
        <div>
            <a-table :columns="columns" :data-source="employees"  bordered>
                <template
                        v-for="col in ['empName', 'empRank', 'empPhone']"
                        :slot="col"
                        slot-scope="text, record, index"
                >
                    <template>
                        {{ text }}
                    </template>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                    <div  style="display: flex;justify-content: space-around">
                        <a-button @click="showDrawer(record)" type="primary" style="width: 65px">
                            查看
                        </a-button>
                        <a-button @click="showModal(record)" type="primary" style="width: 65px">
                            审核
                        </a-button>
                    </div>
                </template>
            </a-table>

            <div>
                <a-drawer
                        title="审核"
                        :width="720"
                        :visible="visible"
                        :body-style="{ paddingBottom: '80px' }"
                        @close="onClose"
                >
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="商品名称">
                                    <a-input />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="采购编号">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="类型">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="规格">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="数量">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="时间">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="审核状态">
                                    <a-select>
                                        <a-select-option value="未审核"> 未审核 </a-select-option>
                                        <a-select-option value="已通过"> 已通过 </a-select-option>
                                        <a-select-option value="未通过"> 未通过 </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <div :style="{
                                      position: 'absolute',
                                      right: 0,
                                      bottom: 0,
                                      width: '100%',
                                      borderTop: '1px solid #e9e9e9',
                                      padding: '10px 16px',
                                      background: '#fff',
                                      textAlign: 'right',
                                      zIndex: 1,
                                    }"
                    >
                        <a-button type="primary" @click="onClose">
                            关闭
                        </a-button>
                    </div>
                </a-drawer>
                <a-modal
                        title="审核"
                        :visible="modelVisible"
                        :dialog-style="{ top: '20px' }"
                        :width="720"
                        okText="确认"
                        cancelText="取消"
                        @ok="modelHandleOk()"
                        @cancel="modelCancel()"
                >
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="商品名称">
                                    <a-input />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="采购编号">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="类型">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="规格">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="数量">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="时间">
                                    <a-input

                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="审核状态">
                                    <a-select>
                                        <a-select-option value="未审核"> 未审核 </a-select-option>
                                        <a-select-option value="已通过"> 已通过 </a-select-option>
                                        <a-select-option value="未通过"> 未通过 </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [

        {
            title: '姓名',
            dataIndex: 'empName',
            width: '25%',
            scopedSlots: { customRender: 'empName' },
        },
        {
            title: '职级',
            dataIndex: 'empRank',
            width: '15%',
            scopedSlots: { customRender: 'empRank' },
        },
        {
            title: '电话',
            dataIndex: 'empPhone',
            width: '40%',
            scopedSlots: { customRender: 'empPhone' },
        },
        {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
        },
    ];

    const employees = [];
    for (let i = 1; i < 100; i++) {
        employees.push({
            id: i.toString(),
            empName: `Edrward ${i}`,
            empRank: `${i}等`,
            empPhone: `${Math.random(i)*10000}`,
        });
    }
    import * as empServe from '@/services/test/employee.js'
    export default {
        name:'employee',
        data() {
            return {
                employees,
                columns,
                editingKey: '',
                form: this.$form.createForm(this),
                visible: false,
                modelVisible: false,
                qq:{id:'',empName:'',empRank:'',empPhone:''},

            };
        },
        methods: {
            onSearch(value) {
                console.log(value);
            },
            // aduit(key) {
            //     for(let i = 0;i<this.employees.length;i++){
            //         if(this.employees[i].id === key){
            //             console.log(this.employees[i].empName);
            //         }
            //     }
            // },
            showDrawer(record) {
                this.visible = true;
                this.qq = record;
                console.log(this.qq.empPhone);
            },
            onClose() {
                this.visible = false;

            },
            showModal(record) {
                this.modelVisible = true;
                this.qq = record;
                console.log(this.qq.empPhone);

            },
            modelHandleOk(e) {
                console.log(e);
                this.modelVisible = false;
            },
            modelCancel(e) {
                console.log(e);
                this.modelVisible = false;
            },
        },
        async created(){
         // this.employees =  await empServe.getList();
         // console.log("员工列表"+this.employees);
        }
    };
</script>
<style scoped>
    .editable-row-operations a {
        margin-right: 8px;
    }
</style>
